<template>
  <view 
    class="fu-switch"
    :class="[
      `fu-switch--${size}`,
      {
        'fu-switch--checked': modelValue,
        'fu-switch--disabled': disabled
      }
    ]"
    :style="switchStyle"
    @click="handleClick"
  >
    <view class="fu-switch__node">
      <view v-if="loading" class="fu-switch__loading"></view>
    </view>
  </view>
</template>

<script>
import { defineComponent } from 'vue'

/**
 * fu-switch 开关组件
 * @description 开关选择器
 * @property {Boolean} modelValue - 开关的值
 * @property {String} size - 开关尺寸，可选值：large/normal/small/mini
 * @property {Boolean} disabled - 是否禁用
 * @property {Boolean} loading - 是否加载中
 * @property {String} activeColor - 打开时的背景色
 * @property {String} inactiveColor - 关闭时的背景色
 * @event {Function} update:modelValue - 开关状态改变时触发
 * @event {Function} change - 开关状态改变时触发
 */
export default defineComponent({
  name: 'fu-switch',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'normal'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    activeColor: {
      type: String,
      default: ''
    },
    inactiveColor: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue', 'change'],
  computed: {
    switchStyle() {
      const style = {}
      if (this.modelValue && this.activeColor) {
        style.backgroundColor = this.activeColor
        style.borderColor = this.activeColor
      }
      if (!this.modelValue && this.inactiveColor) {
        style.backgroundColor = this.inactiveColor
        style.borderColor = this.inactiveColor
      }
      return style
    }
  },
  methods: {
    handleClick() {
      if (this.disabled || this.loading) return
      const newValue = !this.modelValue
      this.$emit('update:modelValue', newValue)
      this.$emit('change', newValue)
    }
  }
})
</script>

<style lang="scss" scoped>
.fu-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100rpx;
  height: 60rpx;
  background-color: var(--fu-border-color);
  border-radius: 100rpx;
  cursor: pointer;
  transition: all 0.3s;
  border: 2rpx solid var(--fu-border-color);
  box-sizing: border-box;
  
  &__node {
    position: absolute;
    left: 2rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 52rpx;
    height: 52rpx;
    background-color: #fff;
    border-radius: 50%;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  }
  
  &__loading {
    width: 30rpx;
    height: 30rpx;
    border: 3rpx solid var(--fu-primary-color);
    border-radius: 50%;
    border-bottom-color: transparent;
    animation: fu-rotate 1s linear infinite;
  }
  
  // 选中状态
  &--checked {
    background-color: var(--fu-primary-color);
    border-color: var(--fu-primary-color);
    
    .fu-switch__node {
      left: calc(100% - 54rpx);
      transform: translateY(-50%);
    }
  }
  
  // 禁用状态
  &--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  // 尺寸
  &--large {
    width: 120rpx;
    height: 72rpx;
    
    .fu-switch__node {
      width: 64rpx;
      height: 64rpx;
    }
    
    &.fu-switch--checked .fu-switch__node {
      left: calc(100% - 66rpx);
    }
  }
  
  &--small {
    width: 80rpx;
    height: 48rpx;
    
    .fu-switch__node {
      width: 40rpx;
      height: 40rpx;
    }
    
    &.fu-switch--checked .fu-switch__node {
      left: calc(100% - 42rpx);
    }
  }
  
  &--mini {
    width: 60rpx;
    height: 36rpx;
    
    .fu-switch__node {
      width: 28rpx;
      height: 28rpx;
    }
    
    &.fu-switch--checked .fu-switch__node {
      left: calc(100% - 30rpx);
    }
  }
}

@keyframes fu-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style> 